/**
 * Created by tanbingqin on 2020/2/10.
 */
import React  from 'react'
import { messages, queryCurrencyPrecision } from 'share/common'
import { Form, Tag, Input, Popover, Radio, Badge } from 'antd'
import openSlideFrame from "share/openSlideFrame";
import SearchArea from 'components/search-area'
import ResizeTable from 'components/resize-table'
import consumerService from '../consumer.service'
import errorMessage from 'share/errorMessage'
import SlideFrame from 'components/slide-frame'
import CardDetail from '../edit-frames/card-edit-frame'

class CardOpenDetail extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      searchForm: [
        {
          type: 'input',
          id: 'keyword',
          label: messages('supplier-1.key37')/*公司*/,
          placeholder: messages('supplier-1.key129')/*请输入公司代码／名称*/
        }
      ],
      columns: [
        {
          title: messages('supplier-1.key130')/*公司代码*/,
          dataIndex: 'companyCode',
          render: value => value ? <Popover placement="topLeft" content={value}>{value}</Popover> : '-'
        },
        {
          title: messages('supplier-1.key33')/*公司名称*/,
          dataIndex: 'companyName',
          render: value => value ? <Popover placement="topLeft" content={value}>{value}</Popover> : '-'
        },
        {
          title: props.type === 'myacard' ? messages('supplier-1.key131')/*关联公司ID*/ : messages('supplier-1.key132')/*扣款账户*/,
          dataIndex: 'relatedField',
          render: (value, record) => {
            if (props.type === 'myacard' && record.mappingId) {
              return <Popover placement="topLeft" content={record.mappingId}>{record.mappingId}</Popover>;
            } else if (props.type === 'rebeccard' && record.accountNo) {
              return <Popover placement="topLeft" content={record.accountNo}>{record.accountNo}</Popover>;
            } else {
              return '-';
            }
          }
        },
        {
          title: messages('common.column.status')/*状态*/,
          dataIndex: 'status',
          width: 120,
          render: value =>
            <Badge
              status={value === 1001 ? 'success' : 'error'}
              text={value === 1001 ? messages('supplier-1.key35')/*启用temp*/ : messages('supplier-1.key124')/*未启用*/}
            />
        }
      ],
      data: [],
      loading: false,
      page: 0,
      pageSize: 10,
      pagination: {
        total: 0,
        showQuickJumper: true,
        showSizeChanger: true,
        pageSizeOptions: ['10','20','50','100','200']
      },
      searchParams: {}
    }
  }

  componentDidMount(){
    this.getList();
  }

  getList = () => {
    const { type } = this.props;
    const { page, pageSize, searchParams, pagination } = this.state;
    let params = {
      supplierCode: type === 'myacard' ? '001' : '002',
      page,
      size: pageSize,
      ...searchParams
    };
    this.setState({loading: true});
    consumerService.getCardConfigList(params).then(res => {
      pagination.total = Number(res.headers['x-total-count']) || 0;
      pagination.current = page + 1;
      this.setState({loading: false, data: res.data, pagination});
    }).catch(err => {
      this.setState({loading: false});
      errorMessage(err.response);
    });
  };

  search = (values) => {
    let { pagination } = this.state;
    pagination.total = 0;
    this.setState({
      searchParams: values,
      page: values.page ? values.page : 0,
      pagination
    }, this.getList);
  };

  clear = () => {
    let { pagination } = this.state;
    pagination.total = 0;
    this.setState({
      searchParams: {},
      page: 0,
      pagination
    }, this.getList);
  };

  handleTableChange = (pagination) => {
    const { searchParams } = this.state;
    let page = pagination.current;
    this.setState({
      page: page - 1,
      pageSize: pagination.pageSize,
      pagination
    }, this.getList);
  };

  //isSuccess是否是保存成功的关闭
  handleCloseSlide = (isSuccess) => {
    isSuccess && this.getList();
  };

  handleRowClick = (record) => {
    const { type } = this.props;
    SlideFrame.open({
      title: record.companyName,
      content: CardDetail,
      afterClose: this.handleCloseSlide,
      params: {
        type,
        record
      }
    }, this);
  };

  render() {
    const { columns, searchForm, data, loading, pagination } = this.state;
    return (
      <div>
        <SearchArea
          searchForm={searchForm}
          submitHandle={this.search}
          clearHandle={this.clear}
        />
        <div className="table-header">
          <div className="table-header-title">
            {messages('common.total',{arg1: pagination.total||0})/*共搜索到 {arg1} 条数据*/}
          </div>
        </div>
        <ResizeTable
          rowKey="companyId"
          columns={columns}
          dataSource={data}
          pagination={pagination}
          onRow={record => ({onClick: () => this.handleRowClick(record)})}
          onChange={this.handleTableChange}
          loading={loading}
          bordered
          size="middle"
        />
      </div>
    )
  }
}

export default CardOpenDetail;
